<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		/*
		  Ajax函数封装
		*/
		function ajax (options) {

			// 存储的是默认值
			var defaults = {
				type: 'get',
				url: '',
				data: {
					
				},
				header: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				success: function () {

				},
				error: function () {

				}
			};

			// assign() 对象覆盖
			// 使用options 对象中的属性 覆盖 defaults 对象中的属性
			Object.assign(defaults, options);

			// 创建Ajax对象
			var xhr = new XMLHttpRequest();
			// 拼接请求参数的变量！
			var params = '';

			// 拿到用户传进来的请求参数
			// 怎样转换？! 循环对象？!
			// 循环用户传递进来的对象格式数据
			for (var attr in defaults.data) {
				// 将参数转换为字符串格式
				// 在循环体中如何拿到对象的值呢?! defaults.data[attr]
				params += attr + '=' + defaults.data[attr] + '&';
			}

			// 对字符串进行截取 subStr
			// 将参数最后面的&截取掉变量！
			// 将截取的结果重新赋值给params
			params = params.substr(0, params.length - 1)
			// 验证字符串是否拼接成功！
			console.log(params);  // name=lvhang&age=23&
			// 判断请求参数
			if (defaults.type == 'get') {
				defaults.url = defaults.url + '?' + params;
			}

			/*
			  {
			  		name: 'lvhang', age: 23
			  	}

			  name=lvhang&age=23

		  	*/ 

		  	



			// 配置 Ajax 对象 'get', 'htpp://localhost:3001'
			xhr.open(defaults.type, defaults.url);

			// 如果请求参数是post
			if (defaults.type == 'post') {
				// 用户希望向服务器端传递的请求参数类型！
				var contentType =  defaults.header['Content-Type'];
				// 因为是post请求 所以必须要设置请求参数的格式类型！[但是不应该把他写死！，应该由调用函数的人传递进来的！]
				xhr.setRequestHeader('Content-Type', contentType);
				// 判断用户希望的请求参数的格式类型
				// 如果类型为json
				if (contentType == 'application/json') {
					// 向服务器端传递json数据格式的参数
					// 调用stringify将json对象转换成json字符串
					xhr.send(JSON.stringify(defaults.data))
				} else {
					// 向服务器端传递普通类型的请求参数
					xhr.send(params);
				}

				
			} else {
				// 发送Ajax请求
				xhr.send()
			}
 
		
			// 获取客服端给予服务器端的响应结果！
			// 监听xhr对象下面的onload事件
			// 当xhr对象接受完响应数据后触发！
			xhr.onload = function () {

				// xhr.getResponseHeader(); 用来获取响应头中的数据!

				var contentType = xhr.getResponseHeader('Content-Type');
				// 服务器端返回的数据！
				var responseText = xhr.responseText;

				// 如果响应类型中包含 application/json
				// includes 判断当前字符串中 是否包含 某字符！
				if (contentType.includes('application/json')) {
					console.log('包含！')
					// 将JSON字符串转换为json对象
					responseText = JSON.parse(responseText);
				}

				// console.log(xhr.responseText)
				// 当http状态码 等于 200 的时候
				if (xhr.status == 200) {
					// 请求成功 调用处理成功情况的函数
					defaults.success(responseText, xhr);
				} else {
					// 请求失败 调用处理失败情况的函数
					defaults.error(responseText, xhr);
				}
				
			}
		}
		ajax({
			// 请求地址
			url: 'http://localhost:3001/responseData',
			success: function (data) {
				console.log('这里是success函数');
				console.log(data);
			}
		})

		/*
		  请求参数要考虑的问题

		  	1 请求参数位置的问题
				
				将请求参数传递到Ajax内部， 在函数内部根据请求方式的不同将请求参数放在不同的位置

				get 放在请求地址的后面

				post 放在send 方法中

			2 请求参数格式问题

				application/x-www-form-urlencoded

					参数名称=参数值&参数名称=参数值【字符串的拼接应该放在函数体的内部， 这样才会对函数的调用者更加的友好！】
					
					name=lvhang&age=23
						
				application/json
					{name: 'lvhang', age: 23}

				1 传递对象数据类型对于函数的调用者更加友好
				2 在函数内部 对象数据类型转换为字符串数据类型更加方便
		*/

	</script>
</body>
</html>